<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="标题">
              <a-input placeholder="请输入标题" v-model="queryParam.titlesummary"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="审批结果">
              <j-dict-select-tag placeholder="请选择审批结果" v-model="queryParam.audit_shbj" dictCode="single_status"/>
            </a-form-item>
          </a-col>

          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="紧急程度">
                <j-dict-select-tag placeholder="请选择紧急程度" v-model="queryParam.priority" dictCode="jjcd"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="问题类型">
                <j-dict-select-tag placeholder="请选择问题类型" v-model="queryParam.questiontype" dictCode="task_type"/>
              </a-form-item>
            </a-col>
          </template>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <!--    <div class="table-operator">

          <a-button type="primary" icon="download" @click="handleExportXls('问题收集表')">导出</a-button>
          <a-upload
            name="file"
            :showUploadList="false"
            :multiple="false"
            :headers="tokenHeader"
            :action="importExcelUrl"
            @change="handleImportExcel">
            <a-button type="primary" icon="import">导入</a-button>
          </a-upload>
          &lt;!&ndash; 高级查询区域 &ndash;&gt;
          <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="batchDel">
                <a-icon type="delete"/>
                删除
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </div>-->

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <span style="float: right">
          <a @click="loadData()"><a-icon type="sync"/>刷新</a>
          <a-divider type="vertical"/>
          <a-popover title="自定义列" trigger="click" placement="leftBottom">
            <template slot="content">
              <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 400px">
                  <template v-for="(item, index) in defColumns">
                    <template v-if="item.key != 'rowIndex' && item.dataIndex != 'action'">
                      <a-col
                        :span="12"
                      ><a-checkbox
                        :value="item.dataIndex"
                      ><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox
                      ></a-col>
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
            <a><a-icon type="setting"/>设置</a>
          </a-popover>
        </span>
      </div>

      <a-table
        ref="table"
        size="small"

        bordered
        rowKey="audit_id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"

        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="itemjjcd" slot-scope="itemjjcd, record">
          <a-tag :color="itemjjcd === '高级'||itemjjcd==='最高级' ? 'volcano' : ''">{{ itemjjcd }}</a-tag>
        </span>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="spjg" slot-scope="text, record">
          <a-tag color="orange" v-if="record.audit_shbj == '0'">待审批</a-tag>
          <a-tag color="green" v-if="record.audit_shbj == '1'">已通过</a-tag>
          <!-- 字符串超长截取省略号显示-->
          <a-tag color="red" v-if="record.audit_shbj == '2'">
            <span>
              <j-ellipsis :value="backText + record.audit_auditoption" :length="20"/>
            </span>
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a v-if="record.audit_shbj == '0'" @click="handleEdit(record)">审批</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <!-- <a-menu-item v-if="record.auditstatus == '1' || record.auditstatus == '2' || record.auditstatus == '3'">
                <a @click="seeProcess(record)">查看流程</a>
              </a-menu-item> -->
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <!--              <a-menu-item>-->
              <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
              <!--                  <a>删除</a>-->
              <!--                </a-popconfirm>-->
              <!--              </a-menu-item>-->
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <tt-question-sp-modal ref="modalForm" @ok="modalFormOk"@close="close"></tt-question-sp-modal>

    <a-drawer
      title="查看流程"
      placement="right"
      :closable="false"
      :width="300"
      :visible="draweris"
      @close="onClose">
      <a-timeline>
        <a-timeline-item v-for="todo in todos">
          <a-icon slot="dot" :type="jdjpg" style="font-size: 16px"/>
          <div v-for="tod in todo">
            <div v-for="to in tod">
              <a-divider>
                {{ to.nodename }} -- <span style="color: #374cc2" v-if="to.isnew == 2">
                  <a-tag color="green">已审批</a-tag>
                </span>
                <span style="color: #374cc2" v-if="to.isnew == 0"><a-tag color="">未开始</a-tag></span>
                <span style="color: #c2a943" v-if="to.isnew == 1"><a-tag color="blue">待审批</a-tag></span>
              </a-divider>

              <p v-if="to.isnew == '2'">审核时间：{{ to.audittime }}</p>
              <p>审核类型：{{ to.auditrange }}</p>
              <p>审核子类型：{{ to.audittype }}</p>
              <p>审核人员：{{ to.auditusername }}</p>
              <span v-if="to.isnew == '2'">
                <p v-if="to.shbj == 1">审核进度：
                  <a-tag color="#87d068">通过</a-tag>
                </p>
                <p v-if="to.shbj == 2">审核进度：
                  <a-tag color="#f50">退回</a-tag>
                </p>
                <p v-if="to.shbj == 2">退回原因：{{ to.auditoption }}</p>
              </span>
              <span v-if="to.isnew == '1'">
                <p v-if="to.shbj == 0">审核进度：
                  <a-tag color="#ffd591">待审核</a-tag>
                </p>
              </span>
              <a-divider/>
            </div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </a-drawer>
  </a-card>
</template>

<script>

import { httpAction, getAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TtQuestionSpModal from './modules/TtQuestionSpModal'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'

import Vue from 'vue'

export default {
  name: 'TtQuestionSpList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    JDictSelectTag,
    TtQuestionSpModal,
    JSuperQuery
  },
  data() {
    return {
      backText: '已退回：',
      todos: [],
      draweris: false,
      isend: false,
      description: '问题审批页面',
      columns: [],
      settingColumns: [],
      jdjpg: 'down-circle',
      queryParam: { audit_shbj: 0 },
      // 表头
      defColumns: [
        {
          title: '标题编号',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '标题',
          align: 'left',
          dataIndex: 'titlesummary'
        },
        {
          title: '需求编号',
          align: 'center',
          dataIndex: 'questioncode'
        },
        {
          title: '要求上线时间',
          align: 'center',
          dataIndex: 'endtime'
        },
        {
          title: '紧急程度',
          align: 'center',
          dataIndex: 'priority_dictText',
          scopedSlots: { customRender: 'itemjjcd' }
        },
        {
          title: '收集人姓名',
          align: 'center',
          dataIndex: 'collectorname'
        },
        {
          title: '收集时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        /* {
          title: '审批状态',
          align: 'center',
          dataIndex: 'isnew_zt_dictText'
        }, */
        {
          title: '审批结果',
          align: 'center',
          dataIndex: 'spjg',
          scopedSlots: { customRender: 'spjg' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
         // fixed: 'right',
       //   width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/tt_question_collect/ttQuestionCollect/splist',
        delete: '/tt_question_collect/ttQuestionCollect/delete',
        deleteBatch: '/tt_question_collect/ttQuestionCollect/deleteBatch',
        exportXlsUrl: '/tt_question_collect/ttQuestionCollect/exportXls',
        importExcelUrl: 'tt_question_collect/ttQuestionCollect/importExcel',
        flowcodelist: '/tt_question_collect/ttCollectFlowNode/list'
      },
      dictOptions: {},
      superFieldList: []
    }
  },
  created() {
    this.getSuperFieldList()
    this.initColumns()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    initDictConfig() {
    },

    handleDetail: function(record) {
      this.$refs.modalForm.edit(record, 'xq')
      this.$refs.modalForm.title = '详情'
      this.$refs.modalForm.disableSubmit = true
    },

     // 关闭弹窗事件，调用刷新
    close: function() {
     this.loadData()
    },

    // 获取流程
    seeProcess(record) {
      //  if (record.auditstatus === '3') {
           // 如果是退回的记录，则显示shbj为1的退回记录
        //   this.scbj = '1'
       //  } else {
           this.scbj = '0'
      //   }

      let params = { id: record.id, scbj: this.scbj, lclx: 'wtlx' }
      getAction(this.url.flowcodelist, params).then((res) => {
        if (res.success) {
          let lis = res.result
          this.todos = lis
        }
      })

      // this.shjllczt(record.id)
      this.draweris = true
    },

    handleEdit: function (record) {
      this.$refs.modalForm.edit(record, 'sp')
      this.$refs.modalForm.title = '审批'
      this.$refs.modalForm.disableSubmit = false
    },

    onClose() {
      this.draweris = false
    },
    // 列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter((item) => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },
    initColumns() {
      // 权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      // this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter((item) => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'titlesummary', text: '标题' })
      fieldList.push({ type: 'string', value: 'project', text: '问题所属项目', dictCode: 'module' })
      fieldList.push({ type: 'string', value: 'questiontype', text: '问题类型', dictCode: 'task_type' })
      fieldList.push({ type: 'string', value: 'needtype', text: '需求类型', dictCode: 'task_xq_type' })
      fieldList.push({ type: 'string', value: 'priority', text: '紧急程度', dictCode: 'jjcd' })
      fieldList.push({ type: 'string', value: 'influenceregion', text: '影响范围' })
      fieldList.push({ type: 'string', value: 'influenceindustry', text: '影响行业' })
      fieldList.push({ type: 'string', value: 'questioncontent', text: '问题详细内容' })
      fieldList.push({ type: 'string', value: 'poroposername', text: '提出人姓名' })
      fieldList.push({ type: 'date', value: 'endtime', text: '截止时间' })
      fieldList.push({ type: 'string', value: 'collectorname', text: '收集人姓名' })
      fieldList.push({ type: 'string', value: 'auditstatus', text: '审批状态' })
      fieldList.push({ type: 'string', value: 'dealstatus', text: '处理状态' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
